<template>
	<div class="user-video" id="user-video" :title="title">
		<ov-video v-if="user.userType === '1'" :stream-manager="streamManager" :title="title" />
		<flv-video v-else :dataset="user" />
		<div class="user-info" v-if="infoShow">{{ user.userName }}{{ dept }}</div>
		<div class="tools-btn-list" :style="{ fontSize: isMain ? '48px' : '16px' }">
			<template v-if="isMain && user.sessionModerator">
				<img class="tools-btn" src="../assets/icon_up.png" data-type="up" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<img class="tools-btn" src="../assets/icon_down.png" data-type="down" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<img class="tools-btn" src="../assets/icon_left.png" data-type="left" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<img class="tools-btn" src="../assets/icon_right.png" data-type="right" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<img class="tools-btn" src="../assets/icon_enlarge.png" data-type="zoomadd" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<img class="tools-btn" src="../assets/icon_shrink.png" data-type="zoomdec" @mousedown="handleStart"
					@mouseup="handleEnd" />
				<!-- <img class="tools-btn" src="../assets/icon_turn.png" @click="handleTurn" />
				<img class="tools-btn" src="../assets/icon_refresh.png" @click="handleRotate" /> -->
			</template>
		</div>

	</div>
</template>

<script>
import OvVideo from './OvVideo';
import FlvVideo from './FlvVideo.vue'

export default {
	name: 'UserVideo',
	components: {
		OvVideo,
		FlvVideo
	},
	props: {
		streamManager: Object,
		user: {
			type: Object,
			default() {
				return {
					name: '',
					code: ''
				}
			}
		},
		isMain: {
			type: Boolean,
			default: false
		},
		infoShow: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			rotate: 0,
			rotateY: 0,
			g_Wfs: null,
			config: {
				IP: '192.168.5.163',
				PortWebSocket: '8088',
				StreamName: 'live/av0'
			}
		}
	},
	computed: {
		title() {
			let dept = this.user.userDept
			return this.user.userName + (dept ? `-${dept}` : '')
		},
		dept() {
			let dept = this.user.userDept
			if (dept.length > 6) {
				return `-${dept.substring(0, 6)}...`
			} else if (dept) {
				return `-${dept}`
			} else {
				return ''
			}
		},
		nowUser() {
			return this.$store.state.user
		},
		isSessionModerator() {
			return this.nowUser.sessionModerator
		}
	},
	mounted() {
		const video = this.$el.children[0]
		video.style.transform = `rotate(0deg) rotateY(0deg)`;
		this.isSessionModerator && this.initWLS()
	},
	beforeDestroy() {
		if (this.g_Wfs) {
			try {
				this.g_Wfs.destroy();
				this.g_Wfs = null;
			} catch (error) {

			}
		}
	},
	methods: {
		initWLS() {
			let g_Wfs = this.g_Wfs
			let config = this.config

			if (g_Wfs) {
				g_Wfs.destroy();
				g_Wfs = null;
			}
			this.g_Wfs = new Wfs();
			let url = `ws://${config.IP}:${config.PortWebSocket}/${config.StreamName}`
			this.g_Wfs.attachMedia('', url);
		},
		// 接收用户操作信号
		getSignal(e) {
			console.log("用户操作云台日志", e);
			let message = JSON.parse(e.data)
			this.postPTZCtrl(message.content, 60)
		},
		handleStart(e) {
			const actionName = e.target.dataset.type + '_start'
			if (this.isSessionModerator) {
				this.postPTZCtrl(actionName, 60);
			} else {
				this.sendMessage(actionName)
			}
		},
		sendMessage(action) {
			let data = {
				content: action,
				...this.nowUser
			}
			this.$parent.session.signal({
				data: JSON.stringify(data), // 消息数据
				type: 'action' // 消息类型
			})
		},
		handleEnd(e) {
			const actionName = e.target.dataset.type + '_stop'
			if (this.isSessionModerator) {
				this.postPTZCtrl(actionName, 60);
			} else {
				this.sendMessage(actionName)
			}
		},
		postPTZCtrl(PtzCmd, value) {
			let szCmd = Object();
			let config = this.config
			szCmd.SysCtrl = Object();
			szCmd.SysCtrl.PtzCtrl = Object();
			szCmd.SysCtrl.PtzCtrl.nChanel = 0;
			szCmd.SysCtrl.PtzCtrl.szPtzCmd = PtzCmd;
			szCmd.SysCtrl.PtzCtrl.byValue = value;

			if (config.IP) {
				let url = `http://${config.IP}/ajaxcom`;
				this.$jsonp(url, {
					"szCmd": JSON.stringify(szCmd)
				}).then((res) => {
					console.log(res)
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		handleRotate() {
			this.rotate += 90
			const video = this.$el.children[0]
			video.style.transform = `rotate(${this.rotate}deg) rotateY(${this.rotateY}deg)`;
		},
		handleTurn() {
			this.rotateY += 180
			const video = this.$el.children[0]
			video.style.transform = `rotate(${this.rotate}deg) rotateY(${this.rotateY}deg)`;
		}
	}
};
</script>
<style lang="scss" scoped>
.user-video {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	.user-info {
		width: inherit;
		max-width: 150px;
		position: absolute;
		left: 0;
		bottom: 0;
		color: rgba(255, 255, 255, 0.8);
		background-color: rgba(0, 0, 0, 0.5);
		padding: 4px 10px;
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.tools-btn-list {
		position: absolute;
		right: 5px;
		top: 5px;
		color: #67C23A;
		font-weight: bolder !important;
		display: flex;
		align-items: center;

		.tools-btn {
			margin-left: 10px;
			width: 40px;
			height: 40px;
		}
	}

	.arrow-icon {
		position: absolute;
		color: #67C23A;
		font-size: 60px;
	}

	.arrow-up {
		@extend .arrow-icon;
		top: 10px;
		left: 50%;
		transform: translate(-50%);
	}

	.arrow-down {
		@extend .arrow-icon;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%);
	}

	.arrow-left {
		@extend .arrow-icon;
		left: 10px;
		top: 50%;
		transform: translate(0, -50%);
	}

	.arrow-right {
		@extend .arrow-icon;
		right: 10px;
		top: 50%;
		transform: translate(0, -50%);
	}
}
</style>
